<template>
  <view class="new-container">
    <view class="header">
      <uni-search-bar radius="100" placeholder="请输入关键字" @focus="toSearch" clearButton="none" cancelButton="none" @confirm="search" />
      <view class="time-container">
        <text :class="['time-date', currentDay == item.value ? 'active' : '']" v-for="item in dateList" :key="item.value" @click="chooseTime(item)">{{item.name}}</text> 
      </view>
    </view>
    <view class="content-section">
      <view class="content-container">
        <view class="book-item" v-for="(v,i) in bookList" :key="i" @click="toDetail(v)">
          <view class="img-container">
            <image class="img" :src="v.cover" mode="aspectFill"></image>
          </view>
          <view class="operation-info">
            <view class="book-info">
              <view class="book-title uni-ellipsis">
                {{v.name}}
              </view>
              <view class="book-tags">
                <text class="tag-item" v-for="(item, index) in v.tags" :key="index">{{item}}</text>
              </view>
            </view>
            <view class="book-go">
              <text class="go-info">查看详情</text>
              <uni-icons class="go-icon" type="forward" size="24"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
export default {
  name: 'newBook',
  components: {
    uniSearchBar,
  },
  data() {
    return {
      dateList: [{name: '周日', value: 7},{name: '周一', value: 1},{name: '周二', value: 2},{name: '周三', value: 3},{name: '周四', value: 4},{name: '周五', value: 5},{name: '周六', value: 6}],
      bookList: [
         {name: '想都别想', cover: '../../../static/test/manhua.png', time: '2020-10-03', tags: ['生活','感悟', '日常']},
        {name: '做梦吧你', cover: '../../../static/test/manhua.png', time: '2020-10-03', tags: ['生活','感悟', '日常']},
        {name: '就算是阿Q精神，也要有追求美好生活的勇气。', cover: '../../../static/test/manhua.png', time: '2020-10-04', tags: ['生活','感悟', '日常']},
        {name: '就算是阿Q精神，也要有追求美好生活的勇气。', cover: '../../../static/test/manhua.png', time: '2020-10-04', tags: ['生活','感悟', '日常']},
      ],
      currentDay: {},
    }
  },
  // computed: {
  //   currentDay: ()=>{
  //     return new Date().getDay()
  //   }
  // },
  onShow() {
    this.currentDay = new Date().getDay()
  },
  methods: {
    search: (e)=>{
      console.log(e)
    },
    toDetail(v){
      uni.navigateTo({
        url: "/pages/tabBar/book/bookInfo",
        success: (res)=>{
          res.eventChannel.emit('emitBookInfo', {info: v})
        }
      })
    },
    toSearch() {
      console.log("toSearch")
      uni.navigateTo({
        url: "/pages/tabBar/recommend/search"
      })
    },
    chooseTime(item) {
      this.currentDay = item.value;
    }
  }
}
</script>

<style lang="scss" scoped>
.new-container {
  /* #ifdef H5 */
  width: 100%;
  /* #endif */
  width: 750rpx;
  position: relative;
  .header {
    position: fixed;
    /* #ifdef H5 */
    // top: 90rpx;
    /* endif */
    left: 0;
    z-index: 50;
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
    width: 750rpx;
    height: 200rpx;
    background: #fff;
    // border-bottom: 1rpx solid #ccc;
    .search-bar {
      // width: 100%;
      height: 80rpx;
    }
    .time-container {
      /* #ifdef H5 */
      width: 100%;
      /* #endif */
      width: 750rpx;
      height: 80rpx;
      line-height: 80rpx;
      display: flex;
      justify-content: space-around;
      align-content: center;
      .time-date {
        /* #ifdef H5 */
        width: 14%;
        margin: 0 1%;
        /* #endif */
        width: 100rpx;
        text-align: center;
        padding: 0 6rpx;
        &.active {
          background: rgb(223, 206, 54);
          color: #fff;
        }
      } 
    }
  }
  .content-section{
    position: absolute;
    top: 200rpx;
    left: 0;
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
    width: 750rpx;
    .content-container {
      // height: 500vh;
      margin-bottom: 100rpx;
      background: #fff;
      display: flex;
      flex-direction: column;
      .book-item{
        /* #ifdef H5 */
        width: 100%;
        /* #endif */
        width: 750rpx;
        height: 580rpx;
        .img-container {
          /* #ifdef H5 */
          width: 100%;
          /* #endif */
          width: 750rpx;
          height: 500rpx;
          .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .operation-info {
          /* #ifdef H5 */
          width: 100%;
          /* #endif */
          width: 750rpx;
          height: 80rpx;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .book-info {
            width: 70%;
            height: 80rpx;
            margin: 0 5rpx;
            .book-title{
              width: 100%;
              font-size: 30rpx;
              font-weight: bolder;
              height: 40rpx;
              line-height: 40rpx;
            }
            .book-tags{
              width: 100%;
              height: 40rpx;
              font-size: 24rpx;
              .tag-item {
                width: 100rpx;
                height: 40rpx;
                padding: 0rpx 6rpx;
                color: #ccc;
                // float: left;
                // display: inline-block;
              }
            }
          }
          .book-go {
            width: 30%;
            height: 80rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .go-info{
              width: 60%;
              height: 80rpx;
              line-height: 80rpx;
            }
            .go-icon{
              width: 40%;
              height: 80rpx;
              line-height: 80rpx;
            }
          }
        }
      }
    }
  }
}
</style>